{% extends "mainPage.html" %}
{% load static %}
{% block thirdstyle %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/contextMenu.css' %}">
    <link rel="stylesheet" href="{% static 'css/postbirdAlertBox.css' %}">
    <link rel="stylesheet" href="{% static 'css/03-02-layer.css' %}">
    <script type="text/javascript" src="{% static 'js/postbirdAlertBox.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/contextMenu.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/mdOfOperation.js' %}"></script>
    <script src="{% static 'js/03-02-layer.js' %}"></script>
    <script type="text/javascript" src="{% static 'luckysheet/luckysheet.umd.js' %}"></script>
    <script src="{% static 'luckysheet/demoData/export.js' %}"></script>
    <script src="{% static 'luckysheet/demoData/FileSaver.js' %}"></script>
    <script src="{% static 'luckysheet/demoData/excelopjs.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/uploadImg.js' %}"></script>
{% endblock %}

{% block main_body %}
<div id="main_body" style="height: 800px;">
    <div id="table_list" style="width: 22%;float:left;display:inline">
        <table id="table_left" class="table_view"> <!-- Replace "table-1" with any of the design numbers -->
            <thead>
                <tr style="height: 45px;text-align:left;">
                    <th style="text-align:left;">
                        <form method="post" enctype="multipart/form-data" action="{% url 'fileList' %}">
                            {% csrf_token %}
                            <input class="button_class" type="submit" id="change_space" value="切换" style="width: 20%;">
                            <select name="space" class="select" id="space_select" style="width: 26%;">
                                {% for sp in upload_option %}
                                   <option value="{{ sp }}">{{ sp }}</option>
                                {% endfor %}
                            </select>
                            <span style="float: right;margin-left: 10%;width: 30%">
                                <h3><a href="/admin/markdown/mdspace/">配置子目录</a></h3>
                            </span>
                        </form>

                    </th>
                </tr>
            </thead>
            <tbody id="left_tbody" style="height: 735px;overflow-y: hidden;overflow-x: hidden">
                {% for dirname in dirList %}
                <tr style="width:100%;height:36px" class="rightRow">
                    <td style="text-align:left;">
                        <li style="margin-left:10px;" class="rightLi">
                            <a href="{% url 'fileList' %}?path={{dirname.path}}&space={{dirname.space}}">
                                {{dirname.name}}
                            </a>
                        </li>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="table_files" style="width:78%;float:right;display:inline">
        <table id="table1" class="table_view"> <!-- Replace "table-1" with any of the design numbers -->
            <thead>
                <tr style="height: 45px;text-align:left;">
                    <th style="width:38%;" colspan="3"><span style="margin-left: 50%">操作</span></th>
                    <th style="width:30%;"><span style="margin-left: 40%">文件名称</span></th>
                    <th><span style="margin-left: 100px">备注说明</span></th>
                </tr>
            </thead>
            <tbody style="height: 735px">
                {% for filename in filenames %}
                <tr style="height: 40px">
                    {% if filename.doc_type == '.xlsx' %}
                    <td style="width:8%"><a href="{% url 'sheetEdit' %}?filename={{filename.filepath}}&space={{filename.space}}">查看</a></td>
                    <td style="width:8%"><a href="{% url 'sheetEdit' %}?filename={{filename.filepath}}&space={{filename.space}}">编辑</a></td>
                    <td style="width:8%"><a href="javascript:void(0);" onclick="downExcel('{{ filename.filepath }}')">下载</a></td>
                    {% else %}
                    <td style="width:8%"><a href="{% url 'view_markdown' %}?filename={{filename.filepath}}&space={{filename.space}}">查看</a></td>
                    <td style="width:8%"><a href="{% url 'edit_markdown' %}?filename={{filename.filepath}}&space={{filename.space}}">编辑</a></td>
                    <td style="width:8%"><a href="{% url 'downFile' %}?filename={{filename.filepath}}">下载</a></td>
                    {% endif %}
                    <td style="width:8%"><a href="{% url 'deleteFile' %}?filename={{filename.filepath}}&space={{filename.space}}">删除</a></td>
                    <td style="width:8%"><input type="button" class="input_button" value="移动" title="filename={{filename.filepath}};space={{filename.space}}"></td>
                    <td style="text-align:left;width:25%"><h5>{{filename.filename}}</h5></td>
                    <td style="text-align:left;"><h5>{{filename.description}}</h5></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div id="layBox" class="lay-box">
    <div class="layer-box">
        <div class="layer-title">
            <h3 class="layer-h3" style="width: 80%">文件上传：</h3>
            <i class="close-btn" style="margin-bottom: 5px;color: #0f0f0f"><h0>X</h0></i>
        </div>
        <script src="{% static 'luckysheet/luckyexcel.umd.js' %}"></script>
        <div class="layer-body">
            <div class="layer-body-box">
                <div class="main-content">
                    <form enctype='multipart/form-data' method='POST'>
                        {% csrf_token %}
                        <p>
                            <h5>
                                <input type="file" name="file" id="filename" style="width: 300px;height: 30px;">
                                <input type="radio" name="fileType" id="isMD" checked value=".md">.md
                                <input type="radio" name="fileType" id="isXlsx" value=".xlsx">.xlsx
                            </h5>

                        </p>
                            <input type="text" name="link" id="link" style="display: none" value="">
                        <p>
                            <h5>
                                上传文件的内容说明：<input type="text" id="description" name="description" style="width: 180px;height: 25px; margin-left: 20px">
                                <input type="button" id="submit-load" value="上传文件" style="width: 120px;height: 30px;margin-left: 10px;color: #0e90d2">
{#                                <input type="button" id="excel-upload" value="上传Excel" style="width: 120px;height: 30px;margin-left: 10px;">#}
                            </h5>
                        </p>
                        <p>
                            <h5 class="title_name">上传后的文件路径是：<span id="upload_path"></span></h5>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    input[type="button"] {
        background: #f1f5f5bf;
        padding: 8px 10px;
        color: #18516d;
        font-size: 15px;
    }
</style>
<div id="moveBox" class="lay-box">
    <div class="layer-box">
        <div class="layer-title">
            <h3 class="layer-h3" style="width: 80%">文件移动至其他目录：</h3>
            <i class="close-btn" style="margin-bottom: 5px;color: #0f0f0f"><h0>X</h0></i>
        </div>

        <div class="layer-body">
            <div class="layer-body-box">
                <div class="main-content">
                    <form enctype='multipart/form-data' method='POST'>
                        {% csrf_token %}
                        <span style="font-size: medium">源文件目录：
                            <input type="text" name="title" id="title" value="" style="width: 79%;" disabled>
                        </span>
                        <p>
                            <span style="font-size: medium">目标目录：</span>
                            <select name="spaceList" id="spaceList" style="width: 20%;margin-left: 16px;">
                                {% for sp in spaceList %}
                                   <option value="{{ sp }}">{{ sp }}</option>
                                {% endfor %}
                            </select>
                            <select name="dirList" id="dirList" style="width: 58%;">
                                {% for sp in dirSpaceList %}
                                   <option value="{{ sp }}">{{ sp }}</option>
                                {% endfor %}
                            </select>
                        </p>
                        <p><input type="button" class="button_class" id="act_move" value="移动文件"
                                  style="width: 100px;height: 30px;background: #7fd9dc"></p>
                        <p>
                            <span style="font-size: medium">移动后的文件路径是：<span id="move_path"></span></span>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

